<clr-main-container><global-message [isAppLevel]="true"></global-message>
<navigator></navigator>
<search-result></search-result>
<div class="login-wrapper"
    [ngStyle]="{'background-image': customLoginBgImg? 'url(static/images/' + customLoginBgImg + ')': ''}">
    <form #signInForm="ngForm" class="login">
        <label class="title"> {{customAppTitle? customAppTitle:(appTitle | translate)}}
        </label>
        <a href="/c/oidc/login" class="login-oidc"  *ngIf="isOidcLoginMode">
            <button type="button" id="log_oidc" class="btn btn-primary btn-block">
                <span>{{'BUTTON.LOG_IN_OIDC' | translate }}</span>
            </button>
        </a>
        <div class="login-group">
            <label for="username" aria-haspopup="true" role="tooltip"
                class="tooltip tooltip-validation tooltip-md tooltip-top-left">
                <input class="username" type="text" required [(ngModel)]="signInCredential.principal"
                    name="login_username" id="login_username" placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}'
                    #userNameInput='ngModel'>
                <span class="tooltip-content">
                    {{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}
                </span>
            </label>
            <label for="username" aria-haspopup="true" role="tpopular-repo-wrapperooltip"
                class="tooltip tooltip-validation tooltip-md tooltip-top-left">
                <input class="password" type="password" required [(ngModel)]="signInCredential.password"
                    name="login_password" id="login_password" placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}'
                    #passwordInput="ngModel">
                <span class="tooltip-content">
                    {{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
                </span>
            </label>
            <div class="checkbox">
                <input type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)"
                    [checked]="rememberMe">
                <label for="rememberme">{{ 'SIGN_IN.REMEMBER' | translate }}</label>
                <a *ngIf="showForgetPwd" href="javascript:void(0)" class="forgot-password-link"
                    (click)="forgotPassword()">{{'SIGN_IN.FORGOT_PWD' | translate}}</a>
            </div>
            <div [class.visibility-hidden]="!isError" class="error active">
                {{ 'SIGN_IN.INVALID_MSG' | translate }}
            </div>
            <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary" (click)="signIn()"
                id="log_in">{{ 'BUTTON.LOG_IN' | translate }}</button>
            <a href="javascript:void(0)" class="signup" (click)="signUp()"
                *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
        </div>
        <div>
            <a href="https://github.com/goharbor/harbor" target="_blank"
                class="more-info-link">{{ 'BUTTON.MORE_INFO' | translate }}</a>
        </div>
    </form>
    <div *ngIf="appConfig.show_popular_repo" id="pop_repo" class="popular-repo-wrapper">
        <top-repo class="repo-container"></top-repo>
    </div>
</div>
</clr-main-container>
<sign-up #signupDialog (userCreation)="handleUserCreation($event)"></sign-up>
<forgot-password #forgotPwdDialog></forgot-password>